<template>
  <container>
    <circle :x="x"></circle>
  </container>
</template>

<script>
import {ref, onMounted, onUnmounted} from 'vue'
import {game} from "../game";

export default {
  name: "Circle",
  setup() {
    const moveDirection = ref('right');// 运动方向
    const x = ref(0)

    function move() {
      console.log("move")
      if (moveDirection.value === "right") {
        x.value++
        if (x.value >= 200) {
          moveDirection.value = "left"
        }
      } else {
        x.value--
        if (x.value <= 0) {
          moveDirection.value = 'right'
        }
      }
    }

    onMounted(() => {
      console.log("组件挂载了")
      game.ticker.add(move)
    })
    onUnmounted(() => {
      console.log("组件卸载了")
      game.ticker.remove(move)
    })

    return {
      x,
    }
  }
}
</script>

<style scoped>

</style>